<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if, v-show,v-for 指令</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--只有show为true的时候，div才存在-->
        <!--<div v-if="show">hello world</div>-->
        <div v-show="show">hello world</div>
        <button @click="handleClick">toggle</button>
        <ul>
            <!--v-for 循环list 数据项-->
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el:"#root",
            data:{
                show: false,
                list:[1,2,3]
            },
            methods:{
                handleClick:function () {
                    this.show = !this.show
                }
            }
        })
    </script>

</body>
</html>